<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <!-- Bootstrap -->
        <link rel="stylesheet" href="__PUBLIC__/metis/assets/lib/bootstrap/css/bootstrap.min.css">
        <!--[if lt IE 9]>
        <script src="__PUBLIC__/metis/assets/lib/html5shiv/html5shiv.js"></script>
        <script src="__PUBLIC__/metis/assets/lib/respond/respond.min.js"></script>
        <![endif]-->
        <link href="__RES__/css/style.css" rel="stylesheet" type="text/css"/>

        <!--jQuery 2.1.1 -->
        <script src="__PUBLIC__/metis/assets/lib/jquery/jquery.min.js"></script>

        <!--Bootstrap -->
        <script src="__PUBLIC__/metis/assets/lib/bootstrap/js/bootstrap.min.js"></script>

        <style type="text/css">
            nav .des-info{
                padding:12px 5px;
            }

            #pdoc_carousel img{
                margin: 0 auto;
            }
            nav div{
                display: inline-block;
            }
            .bs-docs-nav{
                background-color: #FFF;
                margin-bottom: 0;
                border-bottom: 0;
            }
        </style>

    </head>
    <body>

        <header class="navbar navbar-fixed-top bs-docs-nav" id="top" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img src="__RES__/img/brand.jpg" alt=""/>
                    </a>
                </div>
                <nav class="collapse navbar-collapse" role="navigation">
                    <div class="des-info">
                        <span class="label label-primary">您好：{$_SESSION.current_user.username}</span>
                    </div>


                    <div class="des-info">
                        <span>{$pdoc.pdoc_name}</span>
                    </div>

                    <div class="des-info">
                        <span id="spanShowTime">已学习时间：</span>
                    </div>

                    <div class="des-info">
                        <span class="label label-info" id="s_cur_page">当前页码 00</span>
                        /
                        <span class="label label-info">共 {$pdoc.pdoc_pic_number} 页</span>
                    </div>
                    <div class="nav navbar-nav navbar-right" style="margin-top:10px;">
                        <a href="{:U('index')}" class="btn btn-info btn-sm">返回</a>
                    </div>
                </nav>
            </div>
        </header>

        <div id="pdoc_carousel" class="carousel slide" data-ride="carousel" data-interval="false">

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                
                <div class="item active">
                    <img src="__UPLOAD__/index.jpg" alt="" />
                </div>

                <volist name="imgs" id="img">
                    <div class="item">
                        <img src="__UPLOAD__/{$img}" alt=""/>
                    </div>
                </volist>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#pdoc_carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#pdoc_carousel" role="button"  data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <script>
            $(function () {
                $('#pdoc_carousel').on('slid.bs.carousel', function () {
                    var str = $("#pdoc_carousel div.active img").attr("src");
                    var temp = str.match(/\/(\d)+./gi);
                    var page = "00";
                    if(temp !== "" && temp !== null){
                        page = temp[0].substring(1, temp[0].length-1);
                    }
                    $("#s_cur_page").text("当前页码 "+page);
                    //console.log(str);
                });
            });
        </script>
    </body>
</html>
